<template>
  <div class="home">
    <router-view class="fix"></router-view>
    <!-- <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" class="fix"/>
      </keep-alive>
    </router-view> -->
    <van-tabbar route active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item replace to="/index" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/classPage" icon="apps-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item replace to="/cart"  icon="shopping-cart-o"
       :badge="allNum" >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/user" icon="friends-o"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
export default {
  name: "Home",
  components: {},
  setup(props) {
    const { state } = useStore();
    let token = localStorage.getItem('token');
    const allNum = computed(() => { // 购买商品的总数
        let num = 0;
        state.cartList.forEach(item => {
          num+= item.buyNum
        })
        return num;
    })
    if (!token) {
      allNum.value = null;
    }
    return {
      allNum
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  overflow: hidden;
}
.fix {
  height: calc(100% - 50px);
  background: #e9e9e9;
  overflow: auto;
}
</style>